@charset "utf-8";
/* CSS Document */

/* 确保中文字体在生产环境正确加载 */
@media screen {
    * {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif !important;
    }
}
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box}
*,body{padding:0px;	margin:0px;font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif;}

/* 强制所有文本使用指定字体和颜色 */
* {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

/* 确保应用内所有文字都是白色 */
/* #app, #app * {
    color: #fff !important;
} */

/* 特殊颜色类保持原色 */
.text-w { color: #ffe400 !important; }
.text-d { color: #ff6316 !important; }
.text-s { color: #14e144 !important; }
.text-b { color: #07e5ff !important; }

/* 特别针对关键指标等重要文本 */
.tit, .indicator-title, .value-number, .indicator-card, .boxnav {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    color: #fff !important;
}

/* 强制关键指标区域的文字颜色 */
.box .tit, 
.box .indicator-card,
.box .indicator-title,
.box .value-number,
.box .indicator-subtitle,
.box .boxnav,
.box .boxnav * {
    color: #fff !important;
}
body{color:#fff;font-size: 16px; background: #033c76;
    background: -webkit-radial-gradient(50% 35%, farthest-corner,#034f8e,#034987,#02366d,#002353);
    background: radial-gradient(50% 35%, farthest-corner,#034f8e,#034987,#02366d,#002353);
}
html,body{height: 100%;}
li{ list-style-type:none;}
table{}
i{ margin:0px; padding:0px; text-indent:0px;}
img{ border:none; max-width: 100%;}
a{ text-decoration:none; color:#fff;}
a.active,a:focus{ outline:none!important; text-decoration:none;}
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
a:hover{ color:#06c; text-decoration: none!important}
.clearfix:after, .clearfix:before {display: table;content: " "}
 .clearfix:after {clear: both}
.pulll_left{float:left;}
.pulll_right{float:right;}
i{font-style: normal;}
.text-w{color: #ffe400}
.text-d{color: #ff6316}
.text-s{color: #14e144}
.text-b{color: #07e5ff}

.head{position: relative; height: 90px; margin: 0 15px; padding-right: 60px;}
.head h1{  font-size: 30px; letter-spacing: -2px; text-align: center; line-height: 90px; padding-right: 55px; color: #daf9ff;}
.head .menu{}
.head .menu ul{ font-size: 0;}

.head .menu li{ display: inline-block; position: relative;margin: 25px 15px;;}
.head .menu li a{ display: block; font-size: 18px; color: #fff; line-height: 40px; padding: 0 15px; }
.head .time{position: absolute; right: 0; line-height: 90px;}

.menu li:before,
.menu li:after{ position:absolute; width:10px; height:5px;opacity: .4; content: "";  border-top: 2px solid #02a6b5; top: -1px;border-radius: 2px;}
.menu li:before,.menu li a:before{border-left: 2px solid #02a6b5;left: -1px;}
.menu li:after,.menu li a:after{border-right: 2px solid #02a6b5; right: -1px;}
.menu li a{ position:relative;}
.menu li a:before,
.menu li a:after{ position:absolute; width:10px; height:5px; opacity: .4;  content: "";border-bottom: 2px solid #02a6b5; bottom:-1px;border-radius: 2px;}

.head .menu li a:hover{ color: #f4e925;}
.menu li a:hover:before,
.menu li a:hover:after,
.menu li:hover:before,
.menu li:hover:after{border-color:  #f4e925; opacity: 1;}

.mainbox{padding: 0px 10px;}
.nav1{margin-left: -6px; margin-right:-6px;}
.nav1>li{padding:0 6px; float: left;}

.box{ border:1px solid rgba(7,118,181,.5); box-shadow:inset 0 0 10px rgba(7,118,181,.4); margin-bottom: 12px; position: relative;}
.tit{ padding: 10px 10px 10px 45px;border-bottom:1px solid rgba(7,118,181,.7);font-size: 16px; font-weight: 500; position: relative;}
.tit:before,.tit01:before{position: absolute; content: ""; width: 6px; height: 6px; background: rgba(22,214,255,.9);box-shadow: 0 0 5px rgba(22,214,255,.9); border-radius: 10px; left: 10px; top: 18px;}

/* 标题图表装饰 - 默认样式 */
.tit:after {
    position: absolute;
    content: "";
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: linear-gradient(45deg, #29D9D5, #4ba6e0);
    border-radius: 2px;
    opacity: 0.9;
    box-shadow: 0 0 10px rgba(41, 217, 213, 0.7);
}

/* 关键指标 - 仪表盘图标 */
.tit[data-icon="indicator"]:after {
    width: 20px;
    height: 20px;
    background: 
        radial-gradient(circle at 50% 80%, transparent 40%, #ff6316 40%, #ff6316 45%, transparent 45%),
        radial-gradient(circle at 30% 80%, transparent 35%, #ffe400 35%, #ffe400 40%, transparent 40%),
        radial-gradient(circle at 70% 80%, transparent 35%, #14e144 35%, #14e144 40%, transparent 40%),
        linear-gradient(180deg, transparent 50%, rgba(7, 118, 181, 0.3) 50%);
    border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
    border: 2px solid rgba(41, 217, 213, 0.8);
    animation: gaugeRotate 3s ease-in-out infinite;
    box-shadow: 
        0 0 15px rgba(255, 99, 22, 0.6),
        inset 0 0 10px rgba(41, 217, 213, 0.3);
}

/* 业务增长趋势 - 上升箭头图标 */
.tit[data-icon="growth"]:after {
    width: 18px;
    height: 18px;
    background: 
        linear-gradient(45deg, transparent 40%, #14e144 40%, #14e144 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, #29D9D5 40%, #29D9D5 60%, transparent 60%);
    clip-path: polygon(50% 0%, 80% 30%, 65% 30%, 65% 100%, 35% 100%, 35% 30%, 20% 30%);
    animation: arrowPulse 2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(20, 225, 68, 0.8);
}

/* 风险管控雷达 - 雷达扫描图标 */
.tit[data-icon="chart"]:after {
    width: 20px;
    height: 20px;
    background: 
        conic-gradient(from 0deg, #29D9D5 0deg 60deg, transparent 60deg 120deg, #4ba6e0 120deg 180deg, transparent 180deg 240deg, #076ead 240deg 300deg, transparent 300deg 360deg);
    border-radius: 50%;
    border: 2px solid rgba(41, 217, 213, 0.6);
    animation: radarScan 2s linear infinite;
    box-shadow: 
        0 0 15px rgba(41, 217, 213, 0.7),
        inset 0 0 8px rgba(75, 166, 224, 0.4);
}

/* 热门业务排行 - 柱状图图标 */
.tit[data-icon="ranking"]:after {
    width: 18px;
    height: 18px;
    background: 
        linear-gradient(to top, #ff6316 0%, #ff6316 30%, transparent 30%),
        linear-gradient(to top, #ffe400 0%, #ffe400 60%, transparent 60%) 6px 0,
        linear-gradient(to top, #14e144 0%, #14e144 80%, transparent 80%) 12px 0;
    background-size: 4px 100%, 4px 100%, 4px 100%;
    background-repeat: no-repeat;
    border-radius: 2px;
    animation: barGrow 2.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(255, 228, 0, 0.6);
}

/* 动画关键帧 */
@keyframes gaugeRotate {
    0%, 100% { 
        transform: translateY(-50%) rotate(0deg);
        box-shadow: 0 0 15px rgba(255, 99, 22, 0.6), inset 0 0 10px rgba(41, 217, 213, 0.3);
    }
    50% { 
        transform: translateY(-50%) rotate(180deg);
        box-shadow: 0 0 20px rgba(20, 225, 68, 0.8), inset 0 0 15px rgba(41, 217, 213, 0.5);
    }
}

@keyframes arrowPulse {
    0%, 100% { 
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 12px rgba(20, 225, 68, 0.8);
    }
    50% { 
        transform: translateY(-50%) scale(1.2);
        box-shadow: 0 0 18px rgba(20, 225, 68, 1);
    }
}

@keyframes radarScan {
    0% { 
        transform: translateY(-50%) rotate(0deg);
        box-shadow: 0 0 15px rgba(41, 217, 213, 0.7), inset 0 0 8px rgba(75, 166, 224, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(41, 217, 213, 0.9), inset 0 0 12px rgba(75, 166, 224, 0.6);
    }
    100% { 
        transform: translateY(-50%) rotate(360deg);
        box-shadow: 0 0 15px rgba(41, 217, 213, 0.7), inset 0 0 8px rgba(75, 166, 224, 0.4);
    }
}

@keyframes barGrow {
    0% { 
        background: 
            linear-gradient(to top, #ff6316 0%, #ff6316 20%, transparent 20%),
            linear-gradient(to top, #ffe400 0%, #ffe400 40%, transparent 40%) 6px 0,
            linear-gradient(to top, #14e144 0%, #14e144 60%, transparent 60%) 12px 0;
    }
    50% { 
        background: 
            linear-gradient(to top, #ff6316 0%, #ff6316 40%, transparent 40%),
            linear-gradient(to top, #ffe400 0%, #ffe400 70%, transparent 70%) 6px 0,
            linear-gradient(to top, #14e144 0%, #14e144 90%, transparent 90%) 12px 0;
    }
    100% { 
        background: 
            linear-gradient(to top, #ff6316 0%, #ff6316 30%, transparent 30%),
            linear-gradient(to top, #ffe400 0%, #ffe400 60%, transparent 60%) 6px 0,
            linear-gradient(to top, #14e144 0%, #14e144 80%, transparent 80%) 12px 0;
    }
}

.box:before{ width: 100%; height: 1px; content: ""; position: absolute; left: 0; top:-1px; background:linear-gradient(to right,#076ead,#4ba6e0,#076ead); box-shadow: 0 0 5px rgba(131,189,227,1); opacity: .6}

/* 标题底部装饰线 */
.tit .bottom-line {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
    box-shadow: 0 0 5px rgba(131,189,227,1);
    opacity: 0.6;
}
.box:before{top: -1px;}

.boxnav{padding: 1px;}
.nav2{}
.nav2>li:first-child{border:none;}
.nav2>li{float: left;border-left:1px solid rgba(7,118,181,.2); height:240px; padding: 0 10px 10px 10px;}
.tit01{
    font-size: 16px; 
    font-weight: bold;
    position: relative; 
    color:white;
    padding: 10px 10px 10px 45px; /* 与 .tit 保持一致的内边距 */
    line-height: 1.3; /* 更紧凑的行高以减小视觉占用 */
    border-bottom:1px solid rgba(7,118,181,.7);
}
.tit01:before{ left: 10px; top: 18px;} /* 与 .tit 对齐小圆点位置 */

/* 为 tit01 添加图表装饰 */
.tit01:after {
    position: absolute;
    content: "";
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px; /* 统一与 .tit 的图标大小 */
    height: 18px;
    background: linear-gradient(45deg, #29D9D5, #4ba6e0);
    border-radius: 2px;
    opacity: 0.9;
    box-shadow: 0 0 10px rgba(41, 217, 213, 0.7);
}

.tit01[data-icon="growth"]:after {
    width: 18px; /* 统一与 .tit 的图标大小 */
    height: 18px;
    background: 
        linear-gradient(45deg, transparent 40%, #14e144 40%, #14e144 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, #29D9D5 40%, #29D9D5 60%, transparent 60%);
    clip-path: polygon(50% 0%, 80% 30%, 65% 30%, 65% 100%, 35% 100%, 35% 30%, 20% 30%);
    border-radius: 0;
    animation: arrowPulse 2s ease-in-out infinite; /* 统一动画时长 */
    box-shadow: 0 0 12px rgba(20, 225, 68, 0.8); /* 统一阴影效果 */
}

.ftechart{height: 170px;}



.table1 th{ border-bottom: 1px solid #407abd; font-size: 14px; text-align: center; padding: 6px 0; color: rgba(255,255,255,.8)}
.table1 td{ border-bottom: 1px dotted#407abd;font-size: 12px; padding:6px 0;text-align: center; color: rgba(255,255,255,.6)}
.table1 tr:last-child td{border: none;}
.mapc{background: url(/images/bg3.png) no-repeat center center; background-size: 100% 100%}
.map{
    position: relative; 
    height: 100%; 
    width: 100%;
    background: radial-gradient(ellipse at center, rgba(17, 34, 64, 0.1) 0%, transparent 70%);
    animation: mapGlow 4s ease-in-out infinite alternate;
    overflow: hidden;
    /* 科技感柔和阴影，营造悬浮效果 */
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.4),
                inset 0px 0px 15px rgba(17, 34, 64, 0.6);
    border-radius: 8px;
    /* 增加微妙的边框光晕 */
    border: 1px solid rgba(136, 146, 176, 0.1);
}

@keyframes mapGlow {
    0% {
        background: radial-gradient(ellipse at center, rgba(17, 34, 64, 0.1) 0%, transparent 70%);
    }
    100% {
        background: radial-gradient(ellipse at center, rgba(17, 34, 64, 0.15) 0%, transparent 70%);
    }
}
.map object,
.map img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translate(-50%, -50%) scale(0.9);
    transform-origin: center center;
    /* 全息投影悬浮感：大范围低透明度蓝色外发光 */
    filter: drop-shadow(0 0 35px rgba(60, 139, 255, 0.25))
            drop-shadow(0 0 15px rgba(41, 217, 213, 0.2))
            drop-shadow(0 0 50px rgba(17, 34, 64, 0.3));
    transition: transform 0.3s ease;
    opacity: 0.95;
    cursor: grab;
}

.map object:active,
.map img:active {
    cursor: grabbing;
}

.map object:hover,
.map img:hover {
    /* 悬停时增强全息投影效果 */
    filter: drop-shadow(0 0 45px rgba(60, 139, 255, 0.4))
            drop-shadow(0 0 25px rgba(41, 217, 213, 0.3))
            drop-shadow(0 0 60px rgba(17, 34, 64, 0.4));
    opacity: 1;
}

/* SVG文字样式 - 科技感优化 */
.map svg text {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    fill: #E6F1FF !important; /* 亮白色，更好的对比度 */
    stroke: rgba(10, 25, 47, 0.8) !important; /* 深色描边确保可读性 */
    stroke-width: 0.5px !important;
    text-anchor: middle;
    dominant-baseline: central;
    opacity: 1 !important;
    visibility: visible !important;
    /* 文字阴影增强可读性 */
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8)) !important;
}

/* 确保所有SVG文字都显示 - 科技感优化 */
.map img svg text,
.map object svg text {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
    fill: #E6F1FF !important;
    stroke: rgba(10, 25, 47, 0.8) !important;
    stroke-width: 0.5px !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8)) !important;
}

/* 强制设置SVG路径的默认样式，防止黑色填充 */
.map svg path.zhenqu {
    fill: transparent !important;
    stroke: #1154A3 !important;
    stroke-width: 1px !important;
}

/* 当有自定义颜色时，覆盖默认样式 */
.map svg path.zhenqu[style*="fill"] {
    fill: inherit !important;
}

.map-glow-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    pointer-events: none;
    z-index: 1;
    animation: holographicBorder 8s ease-in-out infinite alternate;
    /* 全息投影边框渐变 */
    background: linear-gradient(45deg, 
        rgba(60, 139, 255, 0.05) 0%, 
        rgba(41, 217, 213, 0.03) 25%, 
        rgba(74, 93, 222, 0.02) 50%, 
        rgba(41, 217, 213, 0.03) 75%, 
        rgba(60, 139, 255, 0.05) 100%);
}

@keyframes holographicBorder {
    0% {
        border-color: rgba(60, 139, 255, 0.2);
        box-shadow: 0 0 15px rgba(60, 139, 255, 0.1),
                    inset 0 0 10px rgba(41, 217, 213, 0.05);
    }
    50% {
        border-color: rgba(41, 217, 213, 0.3);
        box-shadow: 0 0 20px rgba(41, 217, 213, 0.15),
                    inset 0 0 15px rgba(74, 93, 222, 0.08);
    }
    100% {
        border-color: rgba(74, 93, 222, 0.25);
        box-shadow: 0 0 25px rgba(74, 93, 222, 0.12),
                    inset 0 0 12px rgba(60, 139, 255, 0.06);
    }
}

.map-scan-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    /* 全息投影扫描线：多色渐变 */
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(60, 139, 255, 0.3) 20%,
        rgba(41, 217, 213, 0.8) 50%, 
        rgba(60, 139, 255, 0.3) 80%,
        transparent 100%);
    pointer-events: none;
    z-index: 2;
    animation: holographicScan 8s linear infinite;
    /* 添加发光效果 */
    box-shadow: 0 0 8px rgba(41, 217, 213, 0.6);
}

@keyframes holographicScan {
    0% {
        top: -3px;
        opacity: 0;
        box-shadow: 0 0 8px rgba(41, 217, 213, 0.6);
    }
    15% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(41, 217, 213, 0.8);
    }
    85% {
        opacity: 1;
        box-shadow: 0 0 10px rgba(60, 139, 255, 0.7);
    }
    100% {
        top: calc(100% + 3px);
        opacity: 0;
        box-shadow: 0 0 6px rgba(74, 93, 222, 0.5);
    }
}
.map-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    z-index: 10;
    animation: pulse 2s infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 不同分数等级的颜色 - 科技感透明度方案 */
.map-marker.score-excellent {
    background: rgba(41, 217, 213, 0.9);
    box-shadow: 0 0 12px rgba(41, 217, 213, 0.6),
                0 0 24px rgba(41, 217, 213, 0.3);
    border: 1px solid rgba(41, 217, 213, 0.8);
}

.map-marker.score-good {
    background: rgba(60, 139, 255, 0.9);
    box-shadow: 0 0 12px rgba(60, 139, 255, 0.6),
                0 0 24px rgba(60, 139, 255, 0.3);
    border: 1px solid rgba(60, 139, 255, 0.8);
}

.map-marker.score-average {
    background: rgba(74, 93, 222, 0.85);
    box-shadow: 0 0 12px rgba(74, 93, 222, 0.6),
                0 0 24px rgba(74, 93, 222, 0.3);
    border: 1px solid rgba(74, 93, 222, 0.8);
}

.map-marker.score-poor {
    background: rgba(90, 62, 200, 0.85);
    box-shadow: 0 0 12px rgba(90, 62, 200, 0.6),
                0 0 24px rgba(90, 62, 200, 0.3);
    border: 1px solid rgba(90, 62, 200, 0.8);
}

.map-marker.score-bad {
    background: rgba(76, 48, 135, 0.9);
    box-shadow: 0 0 12px rgba(76, 48, 135, 0.6),
                0 0 24px rgba(76, 48, 135, 0.3);
    border: 1px solid rgba(76, 48, 135, 0.8);
}

/* 分数显示标签 - 科技感样式 */
.score-label {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17, 34, 64, 0.95);
    color: #E6F1FF;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 15;
    border: 1px solid rgba(136, 146, 176, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    /* 文字阴影确保清晰度 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.map-marker:hover .score-label {
    opacity: 1;
}

/* 图例 */
.map-legend {
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, 
        rgba(7, 118, 181, 0.9) 0%, 
        rgba(2, 54, 101, 0.9) 100%);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 252, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 252, 0.2),
                inset 0 0 10px rgba(0, 255, 252, 0.1);
    font-size: 11px;
    color: #fff;
    z-index: 20;
    backdrop-filter: blur(5px);
    animation: legendGlow 3s ease-in-out infinite alternate;
}

@keyframes legendGlow {
    0% {
        box-shadow: 0 0 15px rgba(0, 255, 252, 0.2),
                    inset 0 0 10px rgba(0, 255, 252, 0.1);
    }
    100% {
        box-shadow: 0 0 20px rgba(0, 255, 252, 0.4),
                    inset 0 0 15px rgba(0, 255, 252, 0.2);
    }
}

.legend-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 255, 252, 0.3);
    margin-bottom: 8px;
    user-select: none;
}

.legend-title {
    font-size: 12px;
    color: #00fffc;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(0, 255, 252, 0.5);
}

.legend-arrow {
    font-size: 10px;
    color: #00fffc;
    transition: transform 0.3s ease;
}

.legend-toggle:hover {
    background: rgba(0, 255, 252, 0.1);
    border-radius: 4px;
    padding-left: 4px;
    padding-right: 4px;
}

.legend-content {
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.legend-content.collapsed {
    max-height: 0;
    margin-bottom: 0;
}

.map-legend.collapsed .legend-arrow {
    transform: rotate(-90deg);
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    padding: 2px 0;
    transition: all 0.3s ease;
}

.legend-item:hover {
    background: rgba(0, 255, 252, 0.1);
    border-radius: 4px;
    padding-left: 4px;
}

.legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { 
        transform: scale(1); 
        opacity: 1; 
    }
    50% { 
        transform: scale(1.3); 
        opacity: 0.8; 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}
.mapnav{position: absolute;z-index: 10;}
.mapnav div{ background: url(/images/bg1.png) no-repeat; background-size:100% auto;  width: 110px;text-align: center; padding: 20px 0; line-height: 120%;}
.mapnav div span{font-size: 14px; opacity: .6}
.mapnav div p{font-size: 20px; font-weight: bold; padding-top: 5px;}
.mapnav li{float: left; margin-right: 6px;}


.leidanav{margin-top: -5px;}
.leidanav li{float: left; width: 20%; text-align: center; border-left: 1px solid rgba(255,255,255,.1)}
.leidanav2 li{ width: 33.3333%}
.leidanav3 li{ width: 25%}
.leidanav li:first-child{border-left: none;}
.leidanav span{font-size: 12px; opacity: .6}

.leidanav p{font-size: 18px; color: #26a6ff }
.mapnav2{ position: absolute; left: 10px; bottom:0px; width: 40%; z-index: 10;}
.mapnav2 .box{}
.ybp{width: 100%}
.ybp li{float: left; width: 50%; height: 120px; }
.duibi li{float: left; width: 25%; height: 200px; padding: 0; border: none;}

.btn{ position: absolute;  border-radius:2px; padding:4px 20px; opacity: .8;}
.btn1{border: 1px solid rgba(255,255,255,.5); background: #388665; left:35%; top: 30%;}
.btn2{ border: 1px solid rgba(255,255,255,.5); background: #297cc7;right:32%; top: 60%;}
.btn:hover{color: #fff; opacity:1;}
.btn1:before,.btn2:before{position: absolute; content: ''; width: 50px; height: 1px; background: #fff;}
.btn1:before{ transform: rotate(30deg); right: -65%; top: 100%}
.btn2:before{ transform: rotate(30deg); left: -65%; top: -10%}
.tit02{font-size: 14px; padding: 10px 0;}

.tagcloud { width:100%; height:90%!important; overflow: hidden;
  position: relative;

}
.tagcloud a {
  display: block;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
	display: flex; align-items: center; justify-content: center;
  
}

.b01{
    width: 50px;
    height: 50px;
}
.b02{
    width: 80px;
    height: 80px;
}
.b03{
    width: 60px;
    height: 60px;

}
.b04{
    width: 70px;
    height: 70px;

}
.co01{  border: 2px solid rgba(5,118,254,1);   box-shadow: inset 0 0 20px rgba(5,118,254,1);}
.co02{border: 2px solid rgba(238,255,65,1);   box-shadow: inset 0 0 20px rgba(238,255,65,1);}
.co03{border: 2px solid rgba(26,121,181,1);   box-shadow: inset 0 0 20px rgba(26,121,181,1);}
.co04{border: 2px solid rgba(1,187,181,1);   box-shadow: inset 0 0 20px rgba(1,187,181,1);}
.co05{border: 2px solid rgba(255,138,0,1);   box-shadow: inset 0 0 20px rgba(255,138,0,1);}

.huati{ padding-top: 20px;}
.huati li{ font-size: 12px; line-height: 230%;}

.wancheng{display: flex; align-items: center; justify-content: center;}
.wancheng span{font-size: 14px; color: #fff;}
.wancheng h3{font-size: 20px; color:#00b4ff;}
.wancheng h3 i{font-size: 12px; color:#fff;}
.yuan{padding:5px;border-radius: 100%; margin-left: 10px; border: 2px solid rgba(0,99,169,.8);}
.yuan span{width: 60px; height: 60px; border-radius: 100%; background: rgba(0,99,169,.8); display: flex; align-items: center; justify-content: center; font-size: 20px;}

/* 关键指标卡片样式 */
.indicator-card {
    background: linear-gradient(135deg, 
        rgba(7, 118, 181, 0.3) 0%, 
        rgba(2, 54, 101, 0.2) 100%);
    border: 1px solid rgba(0, 255, 252, 0.2);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    position: relative;
    backdrop-filter: blur(3px);
    transition: all 0.3s ease;
}

.indicator-card:hover {
    border-color: rgba(0, 255, 252, 0.4);
    box-shadow: 0 0 12px rgba(0, 255, 252, 0.2);
    transform: translateY(-2px);
}

.indicator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.indicator-title {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.indicator-status {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-safe {
    background: rgba(20, 225, 68, 0.2);
    color: #14e144;
    border: 1px solid rgba(20, 225, 68, 0.3);
}

.status-warning {
    background: rgba(255, 228, 0, 0.2);
    color: #ffe400;
    border: 1px solid rgba(255, 228, 0, 0.3);
}

.status-danger {
    background: rgba(255, 99, 22, 0.2);
    color: #ff6316;
    border: 1px solid rgba(255, 99, 22, 0.3);
}

.indicator-value {
    display: flex;
    align-items: baseline;
    margin-bottom: 4px;
}

.value-number {
    font-size: 18px;
    font-weight: bold;
    color: #07e5ff;
    margin-right: 2px;
}

.value-unit {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-right: 8px;
}

.value-change {
    font-size: 10px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
}

.change-up {
    color: #ff6316;
    background: rgba(255, 99, 22, 0.1);
}

.change-down {
    color: #14e144;
    background: rgba(20, 225, 68, 0.1);
}

.indicator-subtitle {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.2;
}

/* 仪表盘样式 */
.indicator-gauge {
    margin-top: 6px;
}

.gauge-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, #14e144 0%, #ffe400 70%, #ff6316 100%);
    border-radius: 2px;
    transition: width 0.8s ease;
}

.gauge-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
}

/* 迷你图表容器 */
.mini-chart {
    width: 30px;
    height: 15px;
    position: relative;
}

/* 特殊指标卡片背景色调 */
.car-indicator {
    border-color: rgba(20, 225, 68, 0.3);
}

.provision-indicator {
    border-color: rgba(255, 228, 0, 0.3);
}

.npl-indicator {
    border-color: rgba(255, 99, 22, 0.2);
}

.migration-indicator {
    border-color: rgba(255, 228, 0, 0.3);
}

.overdue-indicator {
    border-color: rgba(255, 99, 22, 0.4);
    background: linear-gradient(135deg, 
        rgba(255, 99, 22, 0.15) 0%, 
        rgba(255, 99, 22, 0.05) 100%);
}

/* 危险指标高亮效果 */
.overdue-indicator .value-number {
    color: #ff6316;
    animation: dangerPulse 2s ease-in-out infinite;
}

@keyframes dangerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* 指标滚动容器样式 - 双行滚动 */
.indicators-scroll-container {
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.indicators-scroll-container .indicator-card {
    flex: 0 0 auto;
    /* height: 85px; */
    margin-bottom: 8px;
    position: absolute;
    width: calc(100% - 10px);
    animation: scrollUpDouble 20s linear infinite;
}

/* 为每个指标卡片设置延迟动画，创建连续滚动效果 */
.indicators-scroll-container .indicator-card:nth-child(1) {
    animation-delay: 0s;
}

.indicators-scroll-container .indicator-card:nth-child(2) {
    animation-delay: -4s;
}

.indicators-scroll-container .indicator-card:nth-child(3) {
    animation-delay: -8s;
}

.indicators-scroll-container .indicator-card:nth-child(4) {
    animation-delay: -12s;
}

.indicators-scroll-container .indicator-card:nth-child(5) {
    animation-delay: -16s;
}

/* 双行滚动动画 */
@keyframes scrollUpDouble {
    0% {
        transform: translateY(200px);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    10%, 30% {
        transform: translateY(93px);
        opacity: 1;
    }
    35%, 55% {
        transform: translateY(0px);
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
    65%, 100% {
        transform: translateY(-100px);
        opacity: 0;
    }
}

/* 悬停时暂停滚动 */
.indicators-scroll-container:hover .indicator-card {
    animation-play-state: paused;
}

/* 优化指标卡片在滚动容器中的显示 */
.indicators-scroll-container .indicator-card {
    position: absolute;
    z-index: 1;
}

/* 调整指标卡片内容以适应更小的高度 */
.indicators-scroll-container .indicator-card {
    padding: 6px;
}

.indicators-scroll-container .indicator-title {
    font-size: 10px;
}

.indicators-scroll-container .value-number {
    font-size: 16px;
}

.indicators-scroll-container .value-unit {
    font-size: 11px;
}

.indicators-scroll-container .value-change {
    font-size: 9px;
}

.indicators-scroll-container .indicator-subtitle {
    font-size: 8px;
    margin-top: 2px;
}

.indicators-scroll-container .indicator-status {
    font-size: 8px;
    padding: 1px 4px;
}

.indicators-scroll-container .gauge-bar {
    height: 3px;
    margin-top: 4px;
}

.indicators-scroll-container .gauge-labels {
    font-size: 7px;
    margin-top: 1px;
}

.indicators-scroll-container .mini-chart {
    width: 25px;
    height: 12px;
}

